<template>
  <div class="">
    <div class="titleXX">
      <van-icon
        @click="SM"
        name="scan"
        size="32"
        style="width: 16px"
      ></van-icon>
      <div class="title_WZ">
        {{ title }}
      </div>
      <van-icon
        @click="SY"
        name="wap-home"
        size="32"
        style="width: 16px; padding-right: 10px"
      ></van-icon>
    </div>
    <div class="ulbox">
      <div class="LBul">
        <div style="display: flex; justify-content: space-between">
          <div style="font-size: 15px; font-weight: 700; margin-bottom: 10px">
            基本信息
          </div>
          <div class="ZTimg">
            <van-image
              v-if="DDobj.orderStatus == 0"
              radius="4"
              class="img"
              :src="require('../imgs/SY.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == -1"
              radius="4"
              class="img"
              :src="require('../imgs/QX.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == 2"
              radius="4"
              class="img"
              :src="require('../imgs/SH.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == 1"
              radius="4"
              class="img"
              :src="require('../imgs/WC.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
          </div>
        </div>

        <div class="LBli" style="display: flex; align-items: center">
          <div class="">
            <van-icon size="30" name="map-fill"></van-icon>
          </div>
          <div style="font-size: 13px; margin-left: 5px">
            {{ DDobj.orderLocation }}
          </div>
        </div>
        <van-divider></van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="font-size: 13px">预约人</div>
          <div style="font-size: 13px">
            {{ DDobj.userName }}
          </div>
        </div>
        <van-divider></van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="font-size: 13px">预约项目</div>
          <div style="font-size: 13px; display: flex; align-items: center">
            <div class="">
              {{ DDobj.orderType }}
            </div>
          </div>
        </div>
        <van-divider></van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="font-size: 13px">下单时间</div>
          <div style="font-size: 13px">
            {{ DDobj.creationTime }}
          </div>
        </div>
        <u-divider v-if="DDobj.orderTime != ''"></u-divider>
        <div
          v-if="DDobj.orderTime != ''"
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="font-size: 13px">预约时间</div>
          <div style="font-size: 13px">
            {{ DDobj.orderTime }}
          </div>
        </div>
        <van-divider></van-divider>
        <div
          class="LBli"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="font-size: 13px">预约单号</div>
          <div style="font-size: 13px">
            {{ DDobj.orderNumber }}
          </div>
        </div>
        <van-divider></van-divider>
        <div
          style="font-size: 15px; font-weight: 700; margin-bottom: 10px"
          v-if="DDobj.detailList"
        >
          订单信息
        </div>
        <div class="" v-if="DDobj.detailList">
          <div v-for="(item, index) in DDobj.detailList" :key="index">
            <div class="XXli">
              <div class="XXli_left">
                <van-image
                  mode="widthFix"
                  :showLoading="true"
                  :src="item.picUrl"
                  width="100px"
                  height="100px"
                ></van-image>
              </div>
              <div class="XXli_right">
                <div style="padding-left: 10px; width: 60%">
                  {{ item.name }}
                </div>
                <div class="">预约数：{{ item.qty }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="display: flex; padding: 10px">
        <van-button
          @click="TY(DDobj, '取消订单')"
          v-if="DDobj.orderStatus == 0"
          style="border: none; color: rgb(56, 56, 56); height: 50px; width: 50%"
          :hairline="false"
          color="rgb(229, 229, 229)"
          text="取消订单"
        ></van-button>
        <van-button
          @click="TY(DDobj, '完成订单')"
          v-if="DDobj.orderStatus == 0"
          style="border: none; margin: 0 5px; height: 50px; width: 50%"
          :hairline="false"
          type="primary"
          text="完成订单"
        ></van-button>
        <van-button
          @click="TY(DDobj, '拒绝申请')"
          v-if="DDobj.orderStatus == 2"
          style="
            border: none;
            color: rgb(56, 56, 56);
            margin: 0 5px;
            height: 50px;
            width: 50%;
          "
          :hairline="false"
          color="rgb(229, 229, 229)"
          text="拒绝申请"
        ></van-button>
        <van-button
          @click="TY(DDobj, '同意申请')"
          v-if="DDobj.orderStatus == 2"
          style="border: none; color: #fff; height: 50px; width: 50%"
          :hairline="false"
          color="rgb(54, 194, 168)"
          text="同意申请"
        ></van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import QRCode from "qrcode";
import { getOrderDetailList, updateServiceOrderAdmin } from "@/api/DD/index.js";
import moment from "moment";
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getmoreRoute } from "../../common/moreRouteList";
import { Notify, Dialog } from "vant";
const router = useRouter();
const route = useRoute();
const id = ref("");
const ZT = ref("");
const orderType = ref("");
const showTC = ref(false);
const titleSH = ref("");
const contentNr = ref("");
const DDobj = ref({
  creationTime: "",
  creator: "",
  id: "",
  lastUpdateTime: "",
  mobile: "",
  orderLocation: "",
  orderNumber: "",
  orderStatus: "",
  orderTime: "",
  orderType: "",
  postId: "",
  siteId: "",
  userName: "",
});
const title = ref("订单详情");
const qrCodeUrl = ref("");
onMounted(() => {
  var arrayString = route.query.YYXQxx;
  if (arrayString) {
    // 解码并转换回数组
    let XX = JSON.parse(decodeURIComponent(arrayString).replace(/%25/g, "%"));
    getDD(XX);
  }
});
const SM = () => {
  router.push("/pages/SM/index");
};
//返回首页
const SY = () => {
  router.push({
    name: "i_life_AdminPages",
  });
};
//确认状态
// const QRZC= ()=>{
// 	//完成订单
// 	if (ZT.value == "完成订单") {
// 		showTC.value = false
// 		updateServiceOrderAdmin({
// 			serviceType: orderType.value,
// 			orderStatus: "1",
// 			id: id.value
// 		}).then(res => {
// 			if(res.data.orderType == '洗车服务'||res.data.orderType == '上门保洁'||res.data.orderType == '就医服务'){
// 				router.push("/pages/AdminPages/CLHX/index?YYXQxx=" + li)
// 			}else{
// 		}
// 		})
// 	}
// 	//同意核销
// 	if (ZT.value == "同意申请") {
// 		showTC.value = false
// 		updateServiceOrderAdmin({
// 			serviceType: orderType.value,
// 			orderStatus: "-1",
// 			id: id.value
// 		}).then(res => {
// 			// $refs.paging.reload()
// 			// uni.showToast({
// 			// 	title: '核销成功',
// 			// 	icon: 'success',
// 			// 	duration: 2000
// 			// })
// 		})
// 	}
// 	//取消订单
// 	if (ZT.value == "取消订单") {
// 		showTC.value = false
// 		updateServiceOrderAdmin({
// 			serviceType: orderType.value,
// 			orderStatus: "-1",
// 			id: id
// 		}).then(res => {
// 			// $refs.paging.reload()
// 			// uni.showToast({
// 			// 	title: '取消成功',
// 			// 	icon: 'success',
// 			// 	duration: 2000
// 			// })
// 		})
// 	}
// }
const TY = (val, name) => {
  showTC.value = true;
  ZT.value = name;
  id.value = val.id;
  orderType.value = val.orderType;
  if (ZT.value == "同意申请") {
    Dialog.confirm({
      title: "确认审核",
      message: `正在同意审核，订单号为【${val.orderNumber}】的订单`,
    })
      .then(() => {
        updateServiceOrderAdmin({
          serviceType: orderType.value,
          orderStatus: "-1",
          id: id.value,
        }).then((res) => {
          Notify({ type: "success", message: "订单取消成功" });
          setTimeout(() => {
            router.go(-1); // 后退一步
          }, 1000);
        });
      })
      .catch(() => {
        // on cancel
      });
    // titleSH.value = "确认审核";
    // contentNr.value = `正在同意审核，订单号为【${val.orderNumber}】的订单`;
  }
  if (ZT.value == "完成订单") {
    Dialog.confirm({
      title: "完成订单",
      message: `正在完成订单，订单号为【${val.orderNumber}】的订单`,
    })
      .then(() => {
        updateServiceOrderAdmin({
          serviceType: orderType.value,
          orderStatus: "1",
          id: id.value,
        }).then((res) => {
          Notify({ type: "success", message: "订单完成" });
          setTimeout(() => {
            router.go(-1); // 后退一步
          }, 1000);
        });
      })
      .catch(() => {
        // on cancel
      });
    // titleSH.value = "完成订单";
    // contentNr.value = `正在完成订单，订单号为【${val.orderNumber}】的订单`;
  }
  if (ZT.value == "取消订单") {
    Dialog.confirm({
      title: "取消订单",
      message: `正在取消订单，订单号为【${val.orderNumber}】的订单`,
    })
      .then(() => {
        // on confirm
        updateServiceOrderAdmin({
          serviceType: orderType.value,
          orderStatus: "-1",
          id: id.value,
        }).then((res) => {
          Notify({ type: "success", message: "取消成功" });
          setTimeout(() => {
            router.go(-1); // 后退一步
          }, 1000);
        });
      })
      .catch(() => {
        // on cancel
      });
    // titleSH.value = "取消订单";
    // contentNr.value = `正在取消订单，订单号为【${val.orderNumber}】的订单`;
  }
  if (ZT.value == "拒绝申请") {
    Dialog.confirm({
      title: "拒绝申请",
      message: `正在取消订单，订单号为【${val.orderNumber}】的订单`,
    })
      .then(() => {
        // on confirm
        updateServiceOrderAdmin({
          serviceType: orderType.value,
          orderStatus: "0",
          id: id.value,
        }).then((res) => {
          Notify({ type: "success", message: "拒绝成功" });
          setTimeout(() => {
            router.go(-1); // 后退一步
          }, 1000);
        });
      })
      .catch(() => {
        // on cancel
      });
    // titleSH.value = "拒绝申请";
    // contentNr.value = `正在拒绝申请，订单号为【${val.orderNumber}】的订单`;
  }
};
const generateQRCode = async () => {
  try {
    const url = await QRCode.toDataURL(DDobj.value.orderNumber);
    qrCodeUrl.value = url;
  } catch (err) {
    console.error("二维码生成失败", err);
  }
};
const getDD = (val) => {
  let obj = {
    orderNumber: val.orderNumber,
    postId: val.postId,
    siteId: val.siteId,
  };
  getOrderDetailList(obj).then((res) => {
    if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
      DDobj.value = res.data;
      generateQRCode();
      if (DDobj.value.orderLocation == "") {
        DDobj.value.orderLocation =
          JSON.parse(getmoreRoute())[0].postName + "员工驿站";
      }
      if (DDobj.value.orderTime != "") {
        let orderTime = moment(DDobj.value.orderTime).format("YYYY-MM-DD");
        if (orderTime != "Invalid date") {
          DDobj.value.orderTime = orderTime;
        }
      }
    } else {
    }
  });
};
</script>

<style scoped lang="scss">
@import "@/static/css/GYcSS.scss";
.titleXX {
  position: relative;
  padding: 10px;
  padding-top: 20px;
  background: #fff;
  // margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .title_WZ {
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translate(-50%, 0px);
    font-size: 18px;
    font-weight: 700;
  }
}
.ulbox {
  // height: calc(100vh - 115px);

  padding: 10px;
  box-sizing: border-box;

  .LBul {
    background: #fff;
    //margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
  }
}

.topXX {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0px auto;

  .top {
    font-size: 14px;
    color: rgb(255, 141, 26);
  }
}

.DI {
  position: fixed;
  z-index: 999;
  width: 90%;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -5px);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  background: rgba(245, 245, 245, 1);

  .DI_bottom {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgb(2, 117, 113);
    color: #fff;
    border-radius: 5px;
  }
}

.XXli {
  display: flex;
  align-items: center;

  .XXli_right {
    width: 100%;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
}
</style>